<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--head部分-->
<head th:include="layout :: htmlhead" th:with="title='后台管理'">
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!--头-->
        <div th:replace="fragments/head :: header"></div>
        <div class="layui-body">
        
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>零部件库存</legend>
</fieldset>
    <div class="layui-btn-group">
        <button class="layui-btn" id="btn-newproduct">新增零部件库存</button>
        <button class="layui-btn" id="btn-import">导入零部件库存</button>
        <button class="layui-btn" id="btn-calculate">重新计算</button>
    </div>
<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">零件库存</li>
    <li>部件库存</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
     
<table class="layui-table" lay-data="{url:'/getStock', page: true,id:'test3'}" lay-filter="test3">
  <thead>
    <tr>
    
<th lay-data="{field:'cpspcode', width:180, edit: 'text'}">存货编码</th>
<th lay-data="{field:'cinvaddcode', width:180, edit: 'text'}">存货代码</th>
<th lay-data="{field:'cinvname', width:180, edit: 'text'}">存货名称</th>
<th lay-data="{field:'cinvstd', width:180, edit: 'text'}">存货型号</th>
<th lay-data="{field:'ccomunitname', width:180, edit: 'text'}">主计量单位</th>
<th lay-data="{field:'quantity', width:180, edit: 'text'}">现存数量</th>
      <th lay-data="{fixed: 'right', width: 265, align:'center', toolbar: '#barDemo'}"> </th>
    </tr>
  </thead>
</table>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //监听单元格编辑
  table.on('edit(test3)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
  });

  //监听工具条
  table.on('tool(test3)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){
      layer.msg('编辑操作');
    }else if(layEvent === 'complete'){
      layer.msg('完成并入库');
    }
  });
});
</script>
    
    </div>
    <div class="layui-tab-item">
    
<table class="layui-table" lay-data="{url:'/getBomBStock',page:true, id:'test3'}" lay-filter="test3">
  <thead>
    <tr>
<th lay-data="{field:'cpspcode', width:180, edit: 'text'}">存货编码</th>
<th lay-data="{field:'cinvaddcode', width:180, edit: 'text'}">存货代码</th>
<th lay-data="{field:'cinvname', width:180, edit: 'text'}">存货名称</th>
<th lay-data="{field:'cinvstd', width:180, edit: 'text'}">存货型号</th>
<th lay-data="{field:'ccomunitname', width:180, edit: 'text'}">主计量单位</th>
<th lay-data="{field:'quantity', width:180, edit: 'text'}">现存数量</th>
      <th lay-data="{fixed: 'right', width: 265, align:'center', toolbar: '#barDemo'}"> </th>
    </tr>
  </thead>
</table>
<script id="barDemo" type="text/text">

<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
	  var $ = layui.jquery;
  var table = layui.table;
  
  //监听单元格编辑
  table.on('edit(test3)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
  });
  //监听工具条
  table.on('tool(test3)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){
      layer.msg('编辑操作');
    }else if(layEvent === 'complete'){
      layer.msg('完成并入库');
    }
  });
});
</script>
    </div>
  </div>
</div>
        </div>
        <!--底部-->
        <div th:replace="fragments/footer :: footer"></div>
    </div>
</body>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  $('#btn-newproduct').click(function() {
	  layer.alert('新增零部件库存');
	});
  $('#btn-import').click(function() {
	  layer.alert('导入零部件库存，以导入表格为准，全删全增，未在表格内的，库存不变。');
	});
  $('#btn-calculate').click(function() {
	  layer.alert('修改库存后，重新计算所有数据。');
	});
});
</script>
</html>